<template>
    <div>
        <a-modal
        :dialog-style="{ top: '20px' }"
         v-model:visible="visible" 
         title="办理会议" 
         @ok="handleOk" 
         @cancel="visible = false"
         class="plan-add-edit-modal"
         :width="1000"
         :footer="null"
        >
            <div v-if="visible">
                <a-form :form="form" layout="horizontal" class="add-edit-form">
                    <a-form-item label="会议标题">
                        {{ formState.fhybt }}
                    </a-form-item>
                    <a-form-item label="会议摘要">
                        {{ formState.fhyzy }}
                    </a-form-item>
                    <a-form-item label="会议时间">
                        {{ formState.fhysj }}
                    </a-form-item>
                    <a-form-item label="会议类型" class="flex-1-box">
                        {{ formState.fhylx }}
                    </a-form-item>
                    <a-form-item label="会议地点" class="flex-1-box">
                        {{ formState.fhydd }}
                    </a-form-item>
                    <a-form-item label="会议记录人员" class="flex-1-box">
                        {{ formState.fhyjlryxm }}
                    </a-form-item>
                    <a-form-item label="会议参会人员" class="flex-1-box">
                        <div>
                            <a-button class="blue-btn" type="primary" @click="addPeople">添加人员</a-button>
                        </div>
                        <div style="display: flex;flex-wrap: wrap;">
                            <div v-for="(item,index) in fryList" :key="index" style="width: 20%;">
                                <span>{{ item.fxm }}</span>
                                <a-icon style="color: #ff8000;padding: 5px;font-size: 16px;" type="delete" @click="deleteRyClick(item)"/>
                            </div>
                        </div>
                    </a-form-item>
                    <a-form-item label="请假人员" class="flex-1-box">
                        <div>
                            <a-button class="blue-btn" type="primary" @click="addAskForLeave">添加人员</a-button>
                        </div>
                        <div style="display: flex;flex-wrap: wrap;">
                            <div v-for="(item,index) in askForLeaveList" :key="index" style="width: 20%;">
                                <span>{{ item.fxm }}</span>
                                <a-icon style="color: #ff8000;padding: 5px;font-size: 16px;" type="delete" @click="deleteRyClick(item)"/>
                            </div>
                        </div>
                    </a-form-item>
                    <a-form-item label="应到人数">
                        <a-input
                        v-model:value="formState.fydrs"
                        placeholder="请输入应到人数"/>
                        <!-- <span style="font-weight: 600;">{{ fryList.length + askForLeaveList.length }}人</span> -->
                    </a-form-item>
                    <a-form-item label="实到人数">
                        <a-input
                        v-model:value="formState.fsdrs"
                        placeholder="请输入应到人数"/>
                        <!-- <span style="font-weight: 600;">{{ fryList.length }}人</span> -->
                    </a-form-item>
                    
                    <a-form-item label="会议内容" class="flex-1-box">
                        <!-- <compEditor v-model="formState.fhynr" id="meetingHandlingId" /> -->
                        <quill-editor
                        v-model="formState.fhynr" 
                        @blur="quillEditorBlur"
                        ref="meetingHandling" 
                        :options="editorOption" 
                        >
                        </quill-editor>
                    </a-form-item>
                    <a-form-item label="相关附件" class="flex-1-box">
                        <div v-if="!formState.view">
                            <a-upload :disabled="uploadLoading"
                            v-if="formState.id"
                            :beforeUpload="$event=>{return false}" 
                            :showUploadList="false"
                            action="" 
                            @change="RelatedAccessoriesUploadSave">
                                <a-button :loading="uploadLoading" style="margin-right: 15px;" class="blue-btn" type="primary" >上传</a-button>
                            </a-upload>
                            <a-button v-else style="margin-right: 15px;" class="blue-btn" type="primary" @click="onlyUploadSave">上传</a-button>
                        </div>
                        <div class="related-accesso-box">
                            <div v-for="(item,index) in fjxxList" :key="index">
                                <span style="font-weight: 600;">{{ item.fwjxsmc+item.fwjlx }}</span>
                                <a-icon style="color: #ff8000;padding: 5px;font-size: 16px;" type="delete" @click="deleteClick(item)" v-if="!formState.view"/>
                                <a-icon style="color: rgb(24, 144, 255);padding: 5px;font-size: 16px;" type="eye" @click="viewClick(item)" v-if="item.fwjlx == '.pdf'"/>
                                <a-icon style="color: rgb(24, 144, 255);padding: 5px;font-size: 16px;" type="download" @click="downloadClick(item)" v-if="!formState.view"/>
                            </div>
                        </div>
                    </a-form-item>
                </a-form>
                
            </div>
            <div style="
                display: flex; justify-content: flex-end;
                margin-top: 20px; width: 100%;
                background-color: #fff;">
                <a-button @click="visible = false">取消</a-button>
                <a-button v-if="!formState.view" style="margin: 0 20px;" class="blue-btn" type="primary" @click="handleOk(true)">保存</a-button>
                <a-button v-if="!formState.view" class="blue-btn" type="primary" @click="submitMeetingOk(false)">提交会议</a-button>
            </div>
            <personnelList ref="personnelListRef2" @checkPersonnel="checkPersonnel2" :modaObj="{place:'',oldId:formState.fhyjlry?formState.fhyjlry.split(','):[]}" />
            <personnelList ref="personnelListRef1" @checkPersonnel="checkPersonnel1" :modaObj="{place:'',oldId:currentRYData.id?[currentRYData.id]:[]}" />
            <personnelList ref="personnelListRef3" @checkPersonnel="checkPersonnel3" :modaObj="{place:'',oldId:formState.fhyqjry?formState.fhyqjry.split(','):[]}" />
        </a-modal>
    </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import compSelector from '@/components/compSelector/compSelector.vue'
import moment from 'moment'
import YchConstant from "@/api/YchConstant";
import blobType from '@/common/blobType'
import personnelList from '../../administrativeOffice-new/modal/personnelList.vue'
import compEditor from '@/components/compEditor/compEditor.vue'
import {
    partyHyqueryHyjlCjryList,
    partyHyaddHyjlCjry,
    partyHydeleteHjjlCjry,
    partyHycompletionHyjl,
    zdyFilequeryFjList,
    partyHyuploadFile,
    zdyFiledeleteFile,
    zdyFiledownFile,
    partyHyqueryHyjlQjryList,
    partyHyaddHyjlQjry,
} from './service/index'
export default {
    components:{
        compSelector,
        personnelList,
        compEditor,
    },
    props:{

    },
    computed: {
        // 当前富文本实例
        editor () {
        return this.$refs.meetingHandling.quill
        }
    },
    data(){
        return{
            content:'',
            visible:false,
            formState:{},
            form: this.$form.createForm(this, { name: 'coordinated' }),
            rules:{
                fhybt: [{
                    required: true,
                    message: '请输入会议标题',
                    trigger: 'blur',
                }],
                fhydd: [{
                    required: true,
                    message: '请输入会议地点',
                    trigger: 'blur',
                }],
                fhyzy: [{
                    required: true,
                    message: '请输入会议摘要',
                    trigger: 'blur',
                }],
                fhyjlryxm: [{
                    required: true,
                    message: '请输入会议记录人员',
                    trigger: 'blur',
                }],
                fhysj: [{
                    type:'object',
                    required: true,
                    message: '请选择会议时间',
                    trigger: 'blur',
                }],
                fhyjgts: [{
                    type:'number',
                    required: true,
                    message: '请输入会议间隔天数',
                    trigger: 'blur',
                }],
                fsfxhzx: [{
                    required: true,
                    message: '请选择是否循环执行',
                    trigger: 'blur',
                }],
                // fyxzt: [{
                //     required: true,
                //     message: '请选择有效状态',
                //     trigger: 'blur',
                // }],
            },
            materialUnitList:[],
            uploadLoading:false,
            fjxxList:[],
            fryList:[],
            askForLeaveList:[],
            currentRYData:{},
            editorOption: {
                placeholder: '请在这里输入',
                modules: {
                    toolbar: [
                        ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
                        ['blockquote', 'code-block'], // 引用，代码块
                        [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小
                        [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 列表
                        [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
                        [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
                        [{ 'direction': 'rtl' }], // 文本方向
                        [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 几级标题
                        [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
                        [{ 'font': [false, 'heiti', 'songti', 'kaiti', 'lishu', 'arial', 'monospace'] }], // 字体
                        [{ 'align': [] }], // 对齐方式
                        ['clean'], // 清除字体样式
                        ['image', 'video'] // 上传图片、上传视频
                    ]
                }
            },
            
        }
    },
    watch:{

    },
    mounted(){
    },
    methods:{
        getData(val){
            //console.log(val)
            this.formState = {}
            this.formState = val
            this.fryList = []
            if(val.id){
                this.getPersonnel(val)
                this.getFile(val)
                this.getAskForLeave(val)
            }
        },
        quillEditorBlur(){
            partyHysaveHyjl({id:this.formState.id,fhynr:this.formState.fhynr}).then(res=>{
                if(res.code == 200){
                    this.$message.success('已保存会议内容')
                }else{
                    
                }
            })
        },
        getFile(val){
            zdyFilequeryFjList({id:val.id}).then(res=>{
                if(res.code == 200){
                    this.fjxxList = res.result.records
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        getPersonnel(val){
            partyHyqueryHyjlCjryList({fhyid:val.id}).then(res=>{
                if(res.code == 200){
                    this.fryList = res.result.records
                }else{
                    this.fryList = []
                }
            })
        },
        getAskForLeave(val){
            partyHyqueryHyjlQjryList({fhyid:val.id}).then(res=>{
                if(res.code == 200){
                    this.askForLeaveList = res.result.records
                }else{
                    this.askForLeaveList = []
                }
            })
        },
        addPeople(){
            if(this.formState.id){
                this.currentRYData.id = ''
                this.$refs.personnelListRef1.personnelListVisible = true
                this.$refs.personnelListRef1.getData({place:'',oldId:[]})
            }else{
                this.$message.warning('请先保存会议')
            }
        },
        checkPersonnel1(val,list,list2){
            partyHyaddHyjlCjry({fhyid:this.formState.id,fuserid:list.length?list.join(','):''}).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.getPersonnel(this.formState)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        selectRecordPeople(){
            this.$refs.personnelListRef2.personnelListVisible = true
            this.$refs.personnelListRef2.getData({place:'',oldId:this.formState.fhyjlry?this.formState.fhyjlry.split(','):[]})
        },
        checkPersonnel2(val,list,list2){
            this.formState.fhyjlry = list.length?list.join(','):''
            this.formState.fhyjlryxm = list2.length?list2.join('/'):''
            this.form.setFieldsValue({
                fhyjlryxm:list2.length?list2.join('/'):''
            });
        },
        checkPersonnel3(val,list,list2){
            partyHyaddHyjlQjry({fhyid:this.formState.id,fuserid:list.length?list.join(','):''}).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.getAskForLeave(this.formState)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        addAskForLeave(){
            if(this.formState.id){
                this.currentRYData.id = ''
                this.$refs.personnelListRef3.personnelListVisible = true
                this.$refs.personnelListRef3.getData({place:'',oldId:[]})
            }else{
                this.$message.warning('请先保存会议')
            }
        },
        //相关附件
        RelatedAccessoriesUploadSave({file}){
            //console.log(file)
            if(file.type.indexOf('pdf') !== -1){
                this.uploadLoading = true
                const fileData = new FormData();
                fileData.append("file",file);
                fileData.append("id",this.formState.id);
                partyHyuploadFile(fileData).then(res => {
                    if(res.code){
                        if(res.code == 200){
                            this.uploadLoading = false
                            this.$message.success(res.message)
                        }else{
                            this.uploadLoading = false
                            this.$message.warning(res.message)
                        }
                        
                    }
                    this.getFile(this.formState)
                })
            }else{
                this.$message.warning('请上传pdf文件')
            }
            
            // }
        },
        viewClick(val){
            window.open(
                bootConfig[process.env.NODE_ENV].locality_ApI+YchConstant.SPZX_SPCY+'/zdyFile/downFile?id='+val.id
            )
        },
        downloadClick(val){
            var that = this
            var fileName = val.fwjxsmc
            let param = {id:val.id}
            zdyFiledownFile(param).then((data) => {
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }else{
                    let url = window.URL.createObjectURL(new Blob([data], { type: blobType.type[blobType.suffix.indexOf(val.fwjlx)] }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName + val.fwjlx)
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
                }
            })
        },
        deleteClick(val){
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    zdyFiledeleteFile({id:val.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success('删除成功')
                            that.getFile(that.formState)
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                },
                
            });
        },
        deleteRyClick(item){
            let that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    partyHydeleteHjjlCjry({id:item.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success(res.message)
                            that.getPersonnel(that.formState)
                            that.getAskForLeave(that.formState)
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                }
            })
        },
        handleOk(val){
            this.form.validateFields((err, values) => {
                if (!err) {
                    if(this.formState.id){
                        this.$emit('editItem',{...this.formState,...values,fhysj:moment(this.formState.fhysj).format('YYYY-MM-DD HH:mm')},val)
                    }else{
                        this.$emit('addItem',{...this.formState,...values,fhysj:moment(this.formState.fhysj).format('YYYY-MM-DD HH:mm')},val)
                    }
                    
                }
            })
        },
        //提交会议
        submitMeetingOk(){
            let that = this
            this.$confirm({
                title:'您确认要提交会议吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    partyHycompletionHyjl(that.formState).then(res=>{
                        if(res.code == 200){
                            that.$message.success(res.message)
                            that.visible = false
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                }
            })
            
        },
    }
}
</script>
<style lang="less">
.plan-add-edit-modal{
    .add-edit-form{
        display: flex;
        flex-wrap: wrap;
        .ant-form-item{
            margin-bottom: 5px;
            display: flex;
        }
        .ant-form-item-label{
            width: 135px;
        }
        .ant-form-item-control-wrapper{
            width: 180px;
        }
        .flex-1-box{
            width: 100%;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
    }
}
</style>